/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React, { Component } from 'react';
import { Button, Modal, Row, Col, Form ,Select,Checkbox} from 'antd';
import CustomInput from './CustomInput';
import KbGoods from '@/components/KbGoods';
import KbIcon from '@/components/KbIcon';
import styles from  './Modify.less';

const {Option} =Select;

@Form.create()
class Modify extends Component {
  static defaultProps = {
    onChange: () => {},
  };

  constructor(props) {
    super(props);
    const goods_ = props.goods || {};
    this.state = {
      visible: false,
      type:goods_.type || '0'
    };
  }
  handleGoodsChange(e) {
    this.setState({...e})
  }

  handleChange=(e)=>{
    this.setState({type:e.target.checked?'1':'0'})
}
  onModify = () => {
    this.setState({
      visible: true,
    });
  };

  onSave = () => {
    const {type} = this.state;
    this.receiveNode.validateFields((err, address) => {
      if (err) return;
      this.goodsNode.validateFields(goods => {
        goods.type = type;
        this.setState(
          {
            visible: false,
          },
          this.props.onChange.bind(this, {
            address,
            goods,
          })
        );
      });
    });
  };

  onCancel = () => {
    this.setState({
      visible: false,
    });
  };

  render() {
    const { visible ,type} = this.state;
    const { form, address, goods ,text='编辑',icon=''} = this.props;
    return (
      <>
      {
          icon?<KbIcon type={`icon-${icon}`} onClick={this.onModify} style={{ marginRight: 10 }}/>: <Button
              className={text?styles.text_btn:''}
              type="primary"
              onClick={this.onModify}
              ghost
              size="small"
              icon="form"
              style={{ marginRight: 10 }}
          >{text}</Button>
      }
        <Modal
          destroyOnClose
          width={850}
          centered
          visible={visible}
          title="编辑订单"
          okText="保存"
          onOk={this.onSave}
          onCancel={this.onCancel}
          className={styles.modifys}
        >
          <Row gutter={48}>
            <Col xs={24} sm={11}>
              <div className={styles.sender}><KbIcon type="icon-address"/> 收件信息</div>
              {form.getFieldDecorator('address', {
                initialValue: address,
              })(
                <CustomInput
                  wrappedComponentRef={node => (this.receiveNode = node)}
                  type="receive"
                  okText={false}
                />
              )}
            </Col>
            <Col xs={24} sm={13}>
              <div className={styles.goods}><KbIcon type="icon-goods"/> 物品信息</div>
              {form.getFieldDecorator('goods', {
                initialValue: goods,
              })(
                <KbGoods
                  layout="vertrical"
                  wrappedComponentRef={node => (this.goodsNode = node)}
                  onChange={this.handleGoodsChange.bind(this)}
                />
              )}
            </Col>
          </Row>
          <div className={styles.footer_select}>
            <Checkbox checked={type==1?true:false} onChange={this.handleChange.bind(this)}>标记为 <span style={{color:'#f00'}}>生鲜包裹</span></Checkbox>
          </div>
        </Modal>
      </>
    );
  }
}

export default Modify;
